<script setup>
import { reactive, ref, watch } from 'vue'
import radiogroup from './radiogroup.vue'
import Upload from '@/components/app/upload.vue'
import NewgwmApplet from './newgwmApplet.vue'
import MyIcon from '@/components/my-icon/index.vue'
import { postAddWelcom, postRadarUrlData, postWelcomeDetail } from '@/api'

// 新建入群欢迎语页面
const contentList = ref('')
const miniprogramPicurl = ref('')
const sendStatus = reactive(
	{
		id: 1,
		name: '提醒'
	},
	{
		id: 2,
		name: '不提醒'
	}
)

const emits = defineEmits(['goBack'])
const cancel = () => {
	emits('goBack')
}
const uploadMinProgram = () => {
	dialogVisible.value = true
	console.log(dialogVisible.value)
}
const dialogVisible = ref(false)
const radiogroupvalue = ref()

const newgwmApplet = ref()

const radiodata = ref()
const radioClick = (data) => {
	radiodata.value = data
	console.log(radiodata.value, '接收过来的数据')
}
const getUploadImg = (val) => {
	console.log('组件返回的img', val)
	ruleForm.img1 = val.url
}
const getUploadImg2 = (val) => {
	console.log('组件返回的img', val)
	ruleForm.img2 = val.url
}
const getUploadImg3 = (val) => {
	console.log('组件返回的img', val)
	miniprogramPicurl.value = val.url
}
const getUploadImg4 = (val) => {
	console.log('组件返回的img', val)
	num.img = val.url
}
const show = async (id) => {
	console.log(id, 'sdfasdfasf')
	const r = await postWelcomeDetail({ id: id })
	if (r) {
		let t = r.data
		ruleForm.desc = t.content
		ruleForm.id = t.id
		ruleForm.switchValue = t.send_status
		let j = {}
		if (t.welcome_data) {
			let a = t.welcome_data
			radiodata.value = a.type
			if (a.type == 1) {
				ruleForm.img1 = a.imageurl
			} else if (a.type == 2) {
				j.title = a.link_title
				j.desc = a.link_desc
				urlData.value = a.link_url
				ruleForm.img2 = a.link_picurl
				isShow.value = false
				isData.value = true
			} else if (a.type == 3) {
				;(num.title = a.miniprogram_title), (num.appId = a.miniprogram_appid)
				num.appUrl = a.miniprogram_page
				num.img = a.miniprogram_picurl
			}
		}
		ruleForm.welcomeInput2 = j
	}
}

const rules = reactive({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	],
	accountnumber: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	],

	resource: [
		{
			required: true,
			message: 'Please select activity resource',
			trigger: 'change'
		}
	],
	img: [
		{
			required: true,
			message: 'Please select activity resource',
			trigger: 'change'
		}
	]
})

// 插入客户昵称
// 新建入群欢迎语
const content = ref()
const ruleFormRef = ref()
const ruleForm = reactive({
	desc: '',
	desc2: [],
	welcomeInput2: '',
	switchValue: true
})
const inputClick = () => {
	console.log(content.value.innerText)
	console.log(ruleForm)
	// ruleForm.desc.push('content.value.innerText')
	console.log(ruleForm.desc.slice(0, 0) + content.value.innerText + ruleForm.desc.slice(0))
	ruleForm.desc = ruleForm.desc.slice(0, 0) + content.value.innerText + ruleForm.desc.slice(0)
	console.log(radiogroupvalue.value)
	// var json = ruleForm.desc
	// content.value.innerText += '插入客户昵称'
	// // form._value = json
	// // handleRefresh()
}
// 显示/不显示
const isShow = ref(true)
const isData = ref(false)
const urlData = ref()
const testUrl = (url) => {
	let match2 = /http[s]{0,1}:\/\/([\w.]+\/?)\S*/
	let testVol = match2.test(url)
	return testVol
}
console.log(urlData.value)
console.log(testUrl(urlData.value))
const changeStatus = () => {
	console.log(testUrl(urlData.value))
	if (testUrl(urlData.value)) {
		postRadarUrlData({
			url: urlData.value
		}).then((res) => {
			ruleForm.welcomeInput2 = res.data
			ruleForm.img2 = res.data.url
			console.log('隐藏', isShow.value)
			// 不显示
			isShow.value = false
			// 显示的内容
			isData.value = true
		})
	} else {
		// debugger
		ElMessage({ message: '链接地址请以http或https开头', type: 'error' })
	}
}
// 清除链接
const resetForm = () => {
	isShow.value = true
	isData.value = false
	console.log('111')
}
// 删除图片
const deleteCur = ref(true)
const deleteTable = ref(false)
const deletePicture = () => {
	console.log('删除')
	deleteCur.value = false
	deleteTable.value = true
}
const num = reactive({
	appId: '',
	appUrl: '',
	img: '',
	title: ''
})
const getDialogueData = (form) => {
	console.log('接收数据', form)
	dialogVisible.value = false
	num.value = form.value
	console.log('数据', num)
}

// 新建内容
const onSubmit = async (formEl) => {
	console.log(num)
	console.log(formEl)
	if (!formEl) return
	if (radiodata.value == 1) {
		// 图片
		var json = {
			content: ruleForm.desc,
			send_status: ruleForm.switchValue,
			type: radiodata.value,
			image: ruleForm.img1
		}
		console.log('图片', json)
		if (ruleForm.id) json.id = ruleForm.id
		postAddWelcom(json).then((res) => {
			ElMessage({ message: '提交成功', type: 'success' })
			cancel()
		})
	} else if (radiodata.value == 2) {
		// 链接
		var json = {
			content: ruleForm.desc,
			send_status: ruleForm.switchValue,
			type: radiodata.value,
			link_title: ruleForm.welcomeInput2.title,
			link_url: urlData.value,
			link_desc: ruleForm.welcomeInput2.desc,
			link_picurl: ruleForm.img2
		}
		if (ruleForm.id) json.id = ruleForm.id
		postAddWelcom(json).then((res) => {
			ElMessage({ message: '提交成功', type: 'success' })
			cancel()
		})
	} else {
		// 小程序
		console.log('小程序', num.title)
		var json = {
			content: ruleForm.desc,
			send_status: ruleForm.switchValue,
			type: radiodata.value,
			miniprogram_title: num.title,
			miniprogram_appid: num.appId,
			miniprogram_page: num.appUrl,
			miniprogram_picurl: num.img
		}
		if (ruleForm.id) json.id = ruleForm.id
		postAddWelcom(json).then((res) => {
			console.log('接口数据', num.title)
			ElMessage({ message: '提交成功', type: 'success' })
			cancel()
		})
	}
}
defineExpose({
	show
})
</script>

<template>
	<div class="app-back-tab" style="margin: 0 20px">
		<div class="app-flex-left">
			<span class="back-box app-pointer" @click="cancel">
				<MyIcon class="app-icon" name="Back" />
				<span class="back-box-mr">返回</span>
			</span>
		</div>
	</div>
	<!--  -->
	<div class="allStyle">
		<div class="formStyle">
			<div class="formStyleChild">
				<div style="margin-top: 20px">
					<el-form
						ref="ruleFormRef"
						:model="ruleForm"
						:rules="rules"
						label-width="120px"
						class="demo-ruleForm"
						status-icon
					>
						<div class="formTopStyle">编辑群发消息</div>
						<div class="topStyleChild">因企业微信限制，入群欢迎语创建上限为100条，在企业微信后台创建的也将计入其中</div>

						<el-form-item label="欢迎语1:" style="width: 770px; margin-top: 20px">
							<div class="inputContentStyle" @click="inputClick" ref="content">[插入客户昵称]</div>
							<el-input
								v-model="ruleForm.desc"
								:rows="15"
								type="textarea"
								placeholder="请输入群发内容"
								show-word-limit
								maxlength="600"
							/>
						</el-form-item>
						<el-form-item label="欢迎语2:" style="width: 770px; margin-top: 10px">
							<div class="hunyingyuStyle">
								<div>
									<span style="margin-right: 5px">选择消息类型</span>
									<el-radio-group v-model="radiodata" class="ml-4" @change="radioClick">
										<el-radio label="1" size="large">图片</el-radio>
										<el-radio label="2" size="large">链接</el-radio>
										<el-radio label="3" size="large">小程序</el-radio>
									</el-radio-group>
								</div>
								<div v-if="radiodata == 1">
									<Upload :imgurl="ruleForm.img1" @getImg="getUploadImg($event, val)" />
								</div>
								<div v-else-if="radiodata == 2">
									<el-input
										v-model="urlData"
										@change="changeStatus"
										placeholder="链接地址请以http或https开头"
										clearable
										style="width: 500px"
									/>
									<!-- 显示新增内容 -->
									<div style="color: #606266">
										<div style="padding-top: 10px">
											链接标题:<el-input
												v-model="ruleForm.welcomeInput2.title"
												clearable
												style="width: 440px; padding-left: 10px"
											/>
										</div>
										<div style="padding-top: 10px">
											链接摘要:<el-input
												v-model="ruleForm.welcomeInput2.desc"
												clearable
												style="width: 440px; padding-left: 10px"
											/>
										</div>
										<div style="padding-top: 10px">
											链接封面:
											<!-- <div v-show="deleteCur" style="display: flex; width: 130px; height: 130px">
												<img :src="ruleForm.img2" class="avatar" />
												<el-icon @click="deletePicture" style="cursor: pointer; margin-left: -5px; margin-top: -5px"
													><CircleCloseFilled
												/></el-icon>
												<el-button style="color: #1890ff; margin-top: 110px" text plain>重新上传</el-button>
											</div> -->
											<Upload :imgurl="ruleForm.img2" @getImg="getUploadImg2($event, val)" />
										</div>
									</div>
								</div>
								<div v-else-if="radiodata == 3">
									<div>只有在企业微信后台绑定的小程序才可以再次添加哦，查看如何绑定</div>
									<!-- <div>小程序标题：{{ num.title }}</div>
									<div>小程序appID：{{ num.appId }}</div>
									<div>小程序路径：{{ num.appUrl }}</div>
									<div>小程序封面：<el-image :src="num.img" /></div> -->
									<div style="padding-top: 10px" class="xcxType">
										<span class="xcxType_title">小程序标题：</span>
										<el-input v-model="num.title" clearable style="width: 440px" />
									</div>
									<div style="padding-top: 10px" class="xcxType">
										<span class="xcxType_title">小程序appID：</span>
										<el-input v-model="num.appId" clearable style="width: 440px" />
									</div>
									<div style="padding-top: 10px" class="xcxType">
										<span class="xcxType_title">小程序路径：</span>
										<el-input
											v-model="num.appUrl"
											placeholder="注意:小程序路径应以html作为后缀"
											clearable
											style="width: 440px"
										/>
									</div>
									<div style="padding-top: 10px" class="xcxType">
										<span class="xcxType_coverTitle">小程序封面:（ 建议图片大小在2M以内,建议尺寸：352*282px ）</span>
										<Upload :imgurl="num.img" @getImg="getUploadImg4($event, val)" />
									</div>
									<!-- <div @click="uploadMinProgram">
										<span style="display: inline-block; border: 1px dashed #999; padding: 0 10px">
											<el-icon>
												<Plus />
											</el-icon>
										</span>
									</div>
									<NewgwmApplet
										ref="newgwmApplet"
										:dialogVisible="dialogVisible"
										@getDialogueData="getDialogueData"
									></NewgwmApplet> -->
								</div>
							</div>
						</el-form-item>
						<el-form-item label="消息提醒">
							<div class="switchStyle">
								<div>
									<el-switch
										v-model="ruleForm.switchValue"
										:active-value="1"
										inactive-value="0"
										:active-text="ruleForm.switchValue ? '已开启' : '已关闭'"
									/>
								</div>
								<div>
									<span>开启后，新建该条欢迎语会通过「客户群」群发通知企业全部员工：“管理员创建了新的入群欢迎语”</span>
								</div>
							</div>
						</el-form-item>
					</el-form>
				</div>

				<div style="margin: 50px 0 50px 100px">
					<el-button type="primary" @click="onSubmit(ruleFormRef)">{{ruleForm.id?"修改":"新建"}}入群欢迎语</el-button>
				</div>
			</div>
			<!-- 右边 -->
			<div class="formStyleRight">
				<img src="../../../../assets/phone.png" />
			</div>
		</div>
	</div>
</template>

<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.el-popover.my-el-popover {
	height: 200px;
}
</style>
<style scoped>
.pStyle {
	color: #8a8a8a;
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.allStyle {
	margin: 20px;
}

.formStyle {
	display: flex;
	background-color: #ffffff;
}

.formTopStyle {
	height: 53px;
	line-height: 52px;
	border-bottom: 1px solid #ededed;
}

.formStyleChild {
	margin-left: 20px;
	width: 770px;
}

.formStyleRight {
	flex: 1;
	padding-left: 30px;
	margin-top: 100px;
}

.topStyleChild {
	background-color: #fff7f0;
	height: 60px;
	line-height: 60px;
	padding-left: 20px;
	color: #bb5223;
}

.inputContentStyle {
	width: 100%;
	padding: 5px 15px;
	border: 1px solid #eeeeee;
	cursor: pointer;
}

.hunyingyuStyle {
	width: 650px;
	background-color: #fbfbfb;
	border: 1px solid #eeeeee;
	padding: 20px;
	min-height: 200px;
}
</style>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.switchStyle {
	display: felx;
	align-items: flex-start;
}
.xcxType {
}
.xcxType_title {
	color: rgb(96, 98, 102);
	font-size: 14px;
	width: 95px;
	display: inline-block;
}
.xcxType_coverTitle {
	color: rgb(96, 98, 102);
	font-size: 14px;
}
</style>
